<template>
  <div class="basis">
    <h3 class="title">
      <icon-svg name="iconPersonal"></icon-svg>
      基本资料
    </h3>
    <el-form
      ref="editForm"
      :model="editForm"
      :rules="editFormRules"
      label-width="100px"
      label-position="left"
      @keyup.enter.native="onSubmit()"
    >
      <div class="section">
        <div class="section-title">
          <div class="section-icon"><icon-svg name="iconPreview"></icon-svg></div>
          基本信息
        </div>
        <div class="section-content">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24" class="personal-star">
                  <el-form-item label="登录名" prop="loginUname">
                    <el-input v-model="info.loginUname" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="姓名" prop="cnName">
                    <el-input v-model="editForm.cnName" :disabled="!editing" ref="cnNameInput"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="工号" prop="empId">
                    <el-input v-model="editForm.empId" :disabled="!editing"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="用户昵称" prop="nname">
                    <el-input v-model="editForm.nname" :disabled="!editing"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <div class="avatar">
                <div class="avatar-img">
                  <img v-if="info.avatarFileId" :src="$img(info.avatarFileId)" />
                  <img v-else src="@/assets/img/avatar.png" alt="avatar" />
                </div>
                <span class="avatar-handler" @click="editAvatar">修改头像</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section">
        <div class="section-title">
          <div class="section-icon small"><icon-svg name="iconVocaltion"></icon-svg></div>
          业务信息
        </div>
        <div class="section-content">
          <el-row>
            <el-col :span="12" class="personal-star">
              <el-form-item label="公司" prop="compNm">
                <el-input v-model="info.compNm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="personal-star">
              <el-form-item label="部门" prop="deptNm">
                <el-input v-model="info.deptNm" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="personal-star" v-if="info.cmntStr">
              <el-form-item label="部门路径" prop="cmntStr">
                <el-input v-model="info.cmntStr" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="personal-star">
              <el-form-item label="角色" prop="roleNames">
                <el-input v-model="editForm.roleNames" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职位" prop="userPost">
                <el-input v-model="info.userPost" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section">
        <div class="section-title">
          <div class="section-icon medium"><icon-svg name="iconContact"></icon-svg></div>
          联系信息
        </div>
        <div class="section-content">
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱地址" prop="userEmail">
                <el-input v-model="editForm.userEmail" :disabled="!editing"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="userMobile">
                <el-input v-model="editForm.userMobile" :disabled="!editing"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section">
        <div class="section-content">
          <el-row>
            <el-col :span="24" align="right"
              ><label></label>
              <template v-if="!editing">
                <el-button type="primary" @click="edit">修改</el-button>
              </template>
              <template v-else>
                <el-button @click="cancelEdit">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
              </template>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <avatar-dialog ref="avatarDialog" @refresh="$emit('refresh')"></avatar-dialog>
    <reset-drawer ref="resetDrawer" @refresh="$emit('refresh')"></reset-drawer>
  </div>
</template>

<script>
import avatarDialog from './personal-avatar-item'
import resetDrawer from './reset-pwd-drawer'
export default {
  components: {
    avatarDialog,
    resetDrawer
  },
  props: {
    info: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  watch: {
    info(val) {
      if (val.userId) {
        this.editForm.cnName = val.cnName
        this.editForm.empId = val.empId
        this.editForm.nname = val.nname
        this.editForm.roleNames = val.roleNames ? val.roleNames.join(',') : ''
        this.editForm.userEmail = val.userEmail
        this.editForm.userMobile = val.userMobile
      }
    }
  },
  data() {
    let mobileValidator = (rule, value, callback) => {
      if (value) {
        if (!/^1[0-9]{10}$/.test(value)) callback(new Error('请输入正确的手机号'))
        else callback()
      } else callback()
    }
    return {
      editing: false,
      editForm: {
        cnName: '',
        empId: '',
        nname: '',
        roleNames: '',
        userEmail: '',
        userMobile: ''
      },
      editFormRules: {
        cnName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
        ],
        empId: [
          { required: true, message: '工号不能为空', trigger: 'blur' },
          { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
        ],
        userEmail: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
        userMobile: [{ validator: mobileValidator, trigger: 'blur' }]
      }
    }
  },
  methods: {
    edit() {
      this.editing = true
      this.$nextTick(() => this.$refs['cnNameInput'].focus())
    },
    cancelEdit() {
      this.editForm.cnName = this.info.cnName
      this.editForm.empId = this.info.empId
      this.editForm.nname = this.info.nname
      this.editForm.userEmail = this.info.userEmail
      this.editForm.userMobile = this.info.userMobile
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.editing = false
    },
    editAvatar() {
      this.$refs.avatarDialog.showDialog(this.info.avatarFileId)
    },
    openDrawer() {
      this.$refs.resetDrawer.showDrawer()
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$ajax.setUrl('auth/authUser/info'),
            method: 'put',
            data: this.$ajax.setData({
              cnName: this.editForm.cnName,
              empId: this.editForm.empId,
              nname: this.editForm.nname,
              userEmail: this.editForm.userEmail,
              userMobile: this.editForm.userMobile
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.$emit('refresh')
              this.editing = false
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
$border: 1px solid #e6e6e6;
.basis {
  .title {
    vertical-align: middle;
    margin: 0 20px;
    padding: 10px 0;
    border-bottom: $border;
    color: $theme-color;
    svg {
      width: 25px;
      height: 25px;
      vertical-align: middle;
      margin-right: 5px;
    }
    i {
      font-size: 18px;
      color: #cecece;
      vertical-align: middle;
      margin: -5px 0 0 5px;
      cursor: pointer;
    }
  }
  .section {
    width: 960px;
    padding: 0 0 10px 30px;
    margin: 0 10px;
    border-bottom: 1px solid #e6e6e6;
    &:last-child {
      border: 0;
    }
    .section-title {
      .section-icon {
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        text-align: center;
        line-height: 25px;
        vertical-align: middle;
        margin: 10px 10px 10px 0;
        svg {
          width: 80%;
          height: 90%;
          color: $theme-color;
        }
        &.small svg {
          width: 60%;
          height: 70%;
        }
        &.medium svg {
          width: 70%;
          height: 80%;
          margin-top: 2px;
        }
      }
    }
    .section-content {
      .personal-star {
        .el-form-item__label:before {
          display: inline;
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
      }
      .el-col {
        padding: 15px 0;
        vertical-align: middle;
        .el-input {
          width: 250px;
          &.is-disabled .el-input__inner {
            color: #000;
            cursor: default;
          }
        }
        .el-form-item__label {
          color: #000;
        }
      }
    }
    .avatar {
      width: 120px;
      margin: 50px auto;
      text-align: center;
      .avatar-img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-handler {
        display: inline-block;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
  .pwd-section {
    padding: 10px 0;
    position: relative;
    & + .pwd-section {
      border-top: 1px dashed $border-color;
    }
    p,
    .el-progress {
      float: left;
      margin: 10px 20px;
      padding: 0;
    }
    .el-progress {
      width: 200px;
      margin: 10px;
      .el-progress-bar__outer {
        border-radius: 5px;
      }
      .el-progress-bar__inner {
        border-radius: 5px;
      }
    }
    .section-left {
      width: 120px;
      padding: 0 20px;
      position: absolute;
      top: 20px;
      bottom: 20px;
      left: 0;
      text-align: center;
      &:after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: '';
        vertical-align: middle;
      }
    }
    .section-center {
      padding: 10px;
      margin: 0 200px 0 120px;
      line-height: 25px;
    }
    .section-right {
      width: 200px;
      padding: 0 20px;
      position: absolute;
      top: 20px;
      bottom: 20px;
      right: 0;
      &:after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: '';
        vertical-align: middle;
      }
      i {
        color: #03a739;
        margin-right: 10px;
        &.orange {
          color: #f0ad4e;
        }
      }
      .section-handler {
        display: inline-block;
        margin-left: 20px;
        position: relative;
        cursor: pointer;
        &:before {
          width: 1px;
          height: 80%;
          content: '';
          position: absolute;
          top: 10%;
          left: -10px;
          transform: scaleX(0.5);
          background-color: #aaa;
        }
      }
    }
  }
}
</style>
